<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .box{
            position: absolute;
            top: 50px;
            left: 50px;
            width: 150px;
            height: 150px;
            background-color: #f00;
            /* 动画名 */
            animation-name: move;
            /* 持续时长 */
            animation-duration: 2s;

            /* 延时 */
            animation-delay: 1s;
            /* 运动曲线 */
            animation-timing-function: ease-in-out;
            /* 运动次数 infinite */
            animation-iteration-count: 3;
            /* 运动方向：当元素运动到终点是否倒着来，往复运动 normal */
            animation-direction: alternate;
            /* 停止状态：backwards 回到起点  forwards 保持在终点  both 元素停在哪，就在哪  */
            animation-fill-mode: both;
        }

        .box1{
            position: absolute;
            top: 50px;
            left: 50px;
            width: 150px;
            height: 150px;
            background-color: #f00;
            /* animation: name duration 可以不注意顺序 timing-function delay iteration-count direction fill-mode */
            animation: round 4s ease-in 2s 4;
        }

        .box1:hover {
            animation-play-state: paused;
        }


        @keyframes move {
            from {
                /* top: 50px; */
            }
            to {
                top: 600px;
            }
        }

        @keyframes round {
            0%, 100%{
                
                /* 如果起点不写，会默认从元素样式中查找相应改变的样式。如果元素样式中也没有，动画就不见了 */
                left: 50px;
                top: 50px;
            }
            25%, 75% {
                /* 时间节点可以重复写 */
                background-color: #00f;
            }
            25% {
                top: 50px;
                left: 400px;
            }
            50% {
                /* 动画过程如果想让某个步骤保持一个样式状态，需注明前后状态 */
                top: 600px;
                left: 400px;
                background-color: #f00;
            }
            75% {
                top: 600px;
                left: 50px;
            }
             /* 100% {
               如果某个步骤于另一个步骤样式一样，可以同时注明
                top: 50px;
                left: 50px;
            } */
        }

        .inner {
            position: absolute;
            top: 220px;
            left: 0px;
            width: 100px;
            height: 100px;
            background-color: #0f0;
            transition: all 2s ease 3s;
        }
    </style>
</head>
<body>
    <!-- animation 通过设置动画过程，给元素添加动画时长等效果来让元素具备某一个动画。
        -name  设置动画名
        -duration 设置动画持续时长
            ===》必填
        -delay 设置动画开始延时
        -timing-function 设置动画运动效果曲线(贝塞尔曲线)
        -iteration-count 设置动画执行次数
        -direction 设置动画运动方向
        -fill-mode 设置动画的停止状态

        -play-state 动画状态 running / paused 
    
    @keyframes 动画名 {
        0%-100% 设置各个节点元素的状态
        from - to
    } -->

    <!-- <div class="box"></div> -->
    <div class="box1"></div>

    <div class="inner"></div>
    <script type="text/javascript">
        // 监听动画状态  onanimationstart/animationiteration/animationend

        // 监听过渡事件  ontranstionstart/run/（实验属性）  end
        // run 设定过渡  （隔了延时）  start 开始过渡动画

        var box = document.querySelector(".box1"),
            inner = document.querySelector(".inner");

        box.onanimationstart = dealEvent;
        box.onanimationiteration = dealEvent;
        box.onanimationend = dealEvent;

        function dealEvent(){
            console.log(event.type);
            if(event.type === "animationend"){
                inner.style.left = "600px";
            }
        }

        inner.ontransitionstart = dealEvent;
        inner.ontransitionrun = dealEvent;
        inner.ontransitionend = dealEvent;
    </script>
</body>
</html>